import React from 'react';
import {useSelector, useDispatch, shallowEqual} from 'react-redux'
import {increment} from "../../redux/actions/count";

const HooksComp = () => {
  // console.log('HooksCompProps:',props);
  /*
  useSelector第一个参数是个纯函数 接收store的state,返回一个新的state(对象). state子属性(本例是sum,people)的订阅引发多次调用？
  第二个参数也是个函数(可选)，用于控制组件re-render。
  */
  const store = useSelector(state => {
      console.log('HooksComp:', state);
      return Object.assign({}, state)
    },/*(state,prevState)=>{
    console.log(state,prevState);
    return false;
  }*/shallowEqual)
  /*
  useDispatch使得函数组件可以使用dispatch
   */
  const dispatch = useDispatch();
  const {sum, people} = store;
  return (
    <div>
      <h3>函数组件Hooks: sum:{sum} ---- peopleCount: {people.length}</h3>
      <button onClick={() => dispatch(increment(1))}>sum + 1</button>
    </div>
  );
};

export default HooksComp;
